<template>
    <div class="area-time-range">
        <!-- 省市区景 -->
        <div class="area-time-box">
            <template v-for="(item, index) in options.area">
                <div class="area-item" v-if="item.lightState !== '0'" :class="mapReactClass[item.lightState]"
                    @click="selectArea(item, index)">{{
                        item.lightLabel }}</div>
            </template>
        </div>
        <!-- 段刻 -->
        <div class="area-time-box">
            <template v-for="(item, index) in options.timeMode">
                <div class="scenic-item" v-if="item.lightState !== '0'" :class="mapReactClass[item.lightState]"
                    @click="selectMode(item, index)">{{
                        item.lightLabel }}</div>
            </template>
        </div>
        <!-- 时分秒 -->
        <template v-for="(item, index) in options.timeUnit">
            <div class="scenic-item" v-if="item.lightState !== '0'" :class="mapCircleClass[item.lightState]"
                @click="selectUnit(item, index)">{{
                    item.lightLabel }}</div>
        </template>
    </div>
</template>

<script setup lang="js">
import { watch, ref } from 'vue';
import { useGlobalStore } from '@/store/global';
import { storeToRefs } from 'pinia';
import { fetchCardFilter } from "@/api/global"

const emits = defineEmits(["handleFieldChange"])

const props = defineProps({
    data: {
        default: () => ({
            cardId: "", // 卡片id
            type: "", // 组件类型
            url: "", // 组件数据接口地址
            field: null // 传给后端的key 属性名称
        })
    }
})

const globalStore = useGlobalStore()

const { globalSearchForm } = storeToRefs(globalStore)

// 数据
const options = ref({
    area: [],
    timeMode: [],
    timeUnit: []
})

// 选中数据数组
const selectList = ref([])

// 映射方块class
const mapReactClass = {
    "1": "react-permission", // 无权限
    "2": "react-disabled", // 禁用
    "3": "react-normal", // 正常
    "4": "react-selected", // 选中
}

// 映射圆形class
const mapCircleClass = {
    "1": "circle-permission", // 无权限
    "2": "circle-disabled", // 禁用
    "3": "circle-normal", // 正常
    "4": "circle-selected", // 选中
}

// 初始化数据
const initData = async () => {
    const res = await fetchCardFilter(props.data.url, { ...globalSearchForm.value, cardId: props.data.cardId })
    options.value = res.data
    initSelectedOption()
}

// 初始化被选中项
const initSelectedOption = () => {
    // 处理省市区景 默认值
    if (options.value.area.length != 0) {
        const areaItem = options.value.area.find(item => item.lightState == '4')
        if (areaItem) {
            selectList.value[0] = areaItem.lightType
        }
    }

    // 处理刻段 默认值
    if (options.value.timeMode.length != 0) {
        const timeModeItem = options.value.timeMode.find(item => item.lightState == '4')
        if (timeModeItem) {
            selectList.value[1] = timeModeItem.lightType
        }
    }

    // 处理时分秒 默认值
    if (options.value.timeUnit.length != 0) {
        const timeUnitItem = options.value.timeUnit.find(item => item.lightState == '4')
        if (timeUnitItem) {
            selectList.value[2] = timeUnitItem.lightType
        }
    }
}

// 切换省市区景
const selectArea = (item, index) => {
    toggleLightState(options.value.area, index)
}

// 切换段刻
const selectMode = (item, index) => {
    toggleLightState(options.value.timeMode, index)
}

// 切换时分秒
const selectUnit = (item, index) => {
    toggleLightState(options.value.timeUnit, index)
}

// 通用切换方法 
const toggleLightState = (list, index, disabledStates = ["1", "2"]) => {

    const item = list[index]
    if (disabledStates.includes(item.lightState)) return

    list.forEach((unit, i) => {
        unit.lightState = i === index
            ? "4"
            : unit.lightState === "4"
                ? "3"
                : unit.lightState
    })

    initSelectedOption()
}

// 监听数据有值 并且发生变化触发
watch(() => selectList, (newVal) => {
    if (newVal.value.length != 0) {
        emits("handleFieldChange", props.data.field, newVal.value.join(","))
    }
}, { immediate: true, deep: true })

// 监听左上角 区域 以及 日期时间
watch(() => globalSearchForm.value, (form) => {
    // 判断非空对象
    if (Object.keys(form).length !== 0) {
        initData()
    }
}, { immediate: true })

</script>
<style scoped lang="scss">
.area-time-range {
    display: flex;
    margin-top: vh(20);

    .area-time-box {
        display: flex;
        margin-right: vw(20);
    }

    .area-item {
        width: vw(22);
        height: vw(22);
        background: #124457;
        border-radius: vw(4);
        margin-right: vw(10);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(12);
        cursor: pointer;
    }

    .scenic-item {
        width: vw(22);
        height: vw(22);
        background: #124457;
        border-radius: vw(4);
        margin-right: vw(10);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(12);
        cursor: pointer;
    }

    // 省市区景 刻段

    // 隐藏
    .react-none {
        display: none;
    }

    // 正常
    .react-normal {
        background: #0C222F;
        color: rgba(255, 255, 255, 0.6);
    }

    // 选中
    .react-selected {
        background: #124457;
        color: rgba(255, 255, 255, 0.6);
    }

    // 禁用
    .react-disabled {
        background: #1A2427;
        color: #2C3F44;
    }

    // 无权限
    .react-permission {
        background: rgba(26, 36, 39, 0);
        border: 1px solid #132830;
        color: #2C3F44;
    }

    // 时分秒

    // 正常
    .circle-normal {
        background: #173631;
        color: rgba(255, 255, 255, 0.6);
    }

    // 被选中
    .circle-selected {
        background: #125348;
        color: rgba(255, 255, 255, 0.6);
    }

    // 禁用
    .circle-disabled {
        background: #1A2427;
        color: rgba(44, 63, 68, 0.6);
    }

    // 无权限
    .circle-permission {
        background: rgba(26, 36, 39, 0);
        color: rgba(44, 63, 68, 0.6);
        border: 1px solid #132830;
    }
}
</style>